<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50 flex flex-col">
  
      <!-- 主要内容 -->
      <main class="flex-grow flex items-center justify-center py-12">
        <div class="bg-white rounded-lg shadow-lg p-8 w-full max-w-md">
          <div class="flex justify-center mb-6">
            <div class="flex items-center">
              <el-icon class="text-green-500 text-2xl mr-2"><Money /></el-icon>
              <h2 class="text-xl font-medium">微信扫码支付</h2>
            </div>
          </div>
          <div class="text-center mb-6">
            <p class="text-3xl font-bold text-gray-800">¥ {{ amount }}</p>
            <p class="text-gray-500 mt-2">订单编号: {{ orderId }}</p>
          </div>
          <div class="flex justify-center mb-6">
            <div class="border-4 border-green-500 p-2 rounded-lg">
              <div ref="qrCode"></div>
            </div>
          </div>
          <div class="text-center mb-6">
            <p class="text-green-500 font-medium">请使用微信扫一扫</p>
            <p class="text-gray-500 text-sm mt-1">扫描二维码完成支付</p>
          </div>
          <div class="bg-gray-50 rounded-lg p-4">
            <div class="flex items-start">
              <el-icon class="text-yellow-500 mt-1 mr-2"><Warning /></el-icon>
              <div>
                <p class="text-gray-700 text-sm">
                  手机用户请使用微信扫一扫，扫描上方二维码进行支付
                </p>
                <p class="text-gray-700 text-sm mt-1">
                  在微信中点击右上角"+"，选择"扫一扫"即可
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from "vue";

  import { onBeforeRouteLeave,useRoute,useRouter } from 'vue-router';
  import QRCode from 'qrcodejs2-fix';
  import {
    Wallet,
    Money,
    Warning,
    Phone,
    Message,
    Location,
    Link,
    Share,
    ChatDotRound,
  } from "@element-plus/icons-vue";
  import {getWeiXinPayResultService} from '@/api/pay'
import { ElMessage } from "element-plus";
import router from "@/router";


  
  // 支付信息
  const amount = ref(localStorage.getItem('amount'));
  // 订单编号
  const orderNumber = ref(
    "WX" +
      Math.floor(Math.random() * 10000000000)
        .toString()
        .padStart(10, "0"),
  );
  const qrCode = ref()
  // 二维码图片
  const qrCodeUrl = localStorage.getItem('payCode') 
  console.log(localStorage.getItem('orderId'))
  const orderId=ref(localStorage.getItem('orderId'))
  onMounted(()=>{
   
    console.log(qrCode.value)
  //生成二维码
  const getQrcode=(qText)=>{
            let el = qrCode.value
            new QRCode(el, {
                width: 200,
                height: 200,
                text: qText,
  })
 } 
  getQrcode(qrCodeUrl)     
  })

  const getWeiXinPayResult=async(orderNo)=>{
    const res=await getWeiXinPayResultService(orderNo)
    if(res){
      ElMessage.success('支付成功！正在跳转首页...')
      localStorage.removeItem('orderId')
      localStorage.removeItem('payCode')

      setTimeout(()=>{
        router.push('/')
      },500)
      clearInterval(timer)
    }
  }

  let timer=setInterval(()=>{
    getWeiXinPayResult(orderId.value)
  },500)

  setTimeout(()=>{
    if(timer){
      clearInterval(timer)
      ElMessage.error('支付超时，请重新发起支付')
      router.push('/order')
      localStorage.removeItem('orderId')
      localStorage.removeItem('payCode')

    }
  },1000*60*5)
 
  onBeforeRouteLeave((to, from,next) => {
    clearInterval(timer)
    if(to.path=='/pay'){
      console.log(to.path)
      next('/order');
    }else{
      next()
    }
});

    
  </script>
  
  <style scoped>
  /* 自定义样式 */
  .payment-qrcode__container {
    border: 4px solid #10b981;
    padding: 8px;
    border-radius: 8px;
    display: inline-block;
  }
  </style>
  